<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb
          :text="'主页-语法速通-' + getPeriodName(period) + '-错题本-攻克难题'"
        ></Breadcrumb>
        <RouterTabs :list="routerList" :current="2"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="top">
              <view class="tips">
                <text>请选择正确答案</text>
              </view>
              <view class="time">
                <view class="time_content">
                  <text>倒计时：{{ minuteNumber }}分{{ secondNumber }}秒</text>
                </view>
              </view>
            </view>
            <view class="bottom">
              <ErrorQuestion
                v-if="questionList.length > 0"
                ref="errorQuestion"
                :list="questionList"
                @clearTimer="clearTimer"
                @remove="removeQuestion"
              ></ErrorQuestion>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Tips :show="showTips" :content="tipsContent"></Tips>
  </view>
</template>

<script>
import { getWrongQuestions, removeWrongQuestions } from "@/api/grammar";
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "语法框图",
          url: "pages/grammar/grammarDiagram",
        },
        {
          name: "自主组卷",
          url: "pages/grammar/grammarPaper",
        },
        {
          name: "错题本",
          url: "pages/grammar/grammarBook",
        },
      ],
      id: "",
      period: "",
      questionList: [],
      minute: 1,
      minuteNumber: "01",
      second: 0,
      secondNumber: "00",
      timerId: null,
      showTips: false,
      tipsContent: "错题移除成功！",
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.period = option.period;
    this.init();
  },
  onReady() {
    this.timer();
  },
  methods: {
    init() {
      let params = {
        conceptId: this.id,
      };
      getWrongQuestions(params).then((res) => {
        this.questionList = res.data;
      });
    },
    timer() {
      this.timerId = setInterval(() => {
        this.second--;
        if (this.second < 0) {
          this.second = 59;
          this.minute--;
        }
        if (this.minute < 0) {
          return;
        }
        if (this.second < 10) {
          this.secondNumber = this.second.toString().padStart(2, "0");
        } else {
          this.secondNumber = this.second.toString();
        }
        if (this.minute < 10) {
          this.minuteNumber = this.minute.toString().padStart(2, "0");
        } else {
          this.minuteNumber = this.minute.toString();
        }
        this.countdown++;
      }, 1000);
    },
    clearTimer() {
      clearInterval(this.timerId);
    },
    removeQuestion(id) {
      let params = {
        questionId: id,
      };
      removeWrongQuestions(params).then(() => {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 2000);
      });
    },
    getPeriodName(period) {
      const statusMap = {
        1: "小学语法专项训练",
        2: "初中语法专项训练",
        3: "高中语法专项训练",
        4: "中考押题语法训练",
      };
      return statusMap[period];
    },
  },
};
</script>
<style scoped lang="scss">
@import "./grammarBookDetail.scss";
</style>
